import React from "react";
import { Checkbox, Row, Col, Divider, Button } from 'antd';
import { connect } from 'umi';
import imgReport from '../../assets/report.png'

const imgServ = "http://localhost:21021/Home/GetImageAsync?sysRowId=";
class App extends React.Component {
    state = {
        plainOptions: [],
        checkedList: [],
        indeterminate: true,
        checkAll: false,
    };

    componentDidMount() {
        const { modelList, checkedList } = this.props;
        if (modelList) {
            this.setState({ plainOptions: modelList });
        }
        if (checkedList) {
            this.setState({ checkedList });
        }
    }

    onChange = checkedList => {
        var plainOptions = this.state.plainOptions;
        this.setState({
            checkedList,
            indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
            checkAll: checkedList.length === plainOptions.length,
        });
    };

    onCheckAllChange = e => {
        var checkids = [];
        this.state.plainOptions.map(item => {
            checkids.push(item.id);
        })
        this.setState({
            checkedList: e.target.checked ? checkids : [],
            indeterminate: false,
            checkAll: e.target.checked,
        });
    };
    handlerOk() {
        var checklist = this.state.checkedList;
        checklist.forEach(element => {
            this.props.dispatch({
                type: "CrudModel/create",
                payload: { moduleId: element },
                control: 'UserModule',
            })
        });
        this.props.closeDraw();
    }
    render() {
        return (
            <div>
                <div className="site-checkbox-all-wrapper">
                    <Checkbox
                        indeterminate={this.state.indeterminate}
                        onChange={this.onCheckAllChange}
                        checked={this.state.checkAll}
                    > 全选 </Checkbox>
                </div>
                <Divider />
                <Checkbox.Group
                    //options={this.state.plainOptions}
                    value={this.state.checkedList}
                    onChange={this.onChange}
                >
                    <Row gutter={[0, 10]}>
                        {
                            this.state.plainOptions.map((item, key) => {
                                return (
                                    <Col key={key} span={24}>
                                        <Checkbox value={item.id}>
                                            <span>
                                                <img style={{ width: 24, height: 24, marginRight: 10 }} src={item.logo ? imgServ + item.logo : imgReport} />
                                                {item.moduleName}
                                            </span>
                                        </Checkbox>
                                        <Divider />
                                    </Col>
                                )
                            })
                        }

                    </Row>
                </Checkbox.Group>
                <Button type="primary" onClick={this.handlerOk.bind(this)}>确定</Button>
            </div>
        );
    }
}
export default connect(({ user, CrudModel }) => ({
    currentUser: user.currentUser,
    response: CrudModel.response,
}))(App);